<template>
	<!-- 全部积分 -->
	<u-row>
		<u-col span="12" customStyle="background: #07C160;height: 333rpx;">
			<view class="integral-box">
				<view class="title-box">
					<view class="title">全部积分</view>
					<view class="integral-num">60</view>
				</view>
				<view class="sign-btn">
					<u-button type="primary" text="签到" color="#FEC746" shape="circle"></u-button>
				</view>
			</view>
		</u-col>
	</u-row>
	<!-- 签到 -->
	<view class="content-wrap">
		<SignModel></SignModel>

		<view class="tools-list">
			<u-grid :border="false" col="3">
				<u-grid-item v-for="(item, i) in toolsIconList" :key="i">
					<view class="tool-item">
						<view class="">
							<u-image :src="item.icon" width="90rpx" height="90rpx"></u-image>
						</view>
						<view class="tool-name">{{item.name}}</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
	<!-- 切换栏 -->
	<u-sticky zIndex="99" offsetTop="0">
		<u-row>
			<u-col span="12" customStyle="background: #fff;padding: 0 20rpx;">
				<u-tabs :current="0" :list="tabList" lineColor="#07C160"
					:activeStyle="{color: '#292929', fontWeight: 'bold', fontSize: '28rpx'}"></u-tabs>
			</u-col>
		</u-row>
	</u-sticky>
	
	<!-- 瀑布流 -->
	
	
	<view class="waterfall">
		<u-loading-icon :show="true"></u-loading-icon>
		<WaterfullModel></WaterfullModel>
	</view>
	<u-row>
		<u-col span="12" customStyle="padding: 30rpx 34rpx;">
			<u-button color="#07C160" shape="circle">进入福利商城</u-button>
		</u-col>
	</u-row>

</template>

<script setup lang="ts">
	import { onLoad, onReady } from "@dcloudio/uni-app"
	import SignModel from '@/components/SignModel/index.vue'
	import WaterfullModel from '@/components/WaterfallModel/index.vue'
	import { reactive, readonly, ref } from 'vue';
	import icon1 from '@/static/images/a12.png'
	import icon2 from '@/static/images/a13.png'
	import icon3 from '@/static/images/a14.png'
	// 图标
	const toolsIconList = readonly([
		{ name: '领取积分', icon: icon1 },
		{ name: '我的积分', icon: icon2 },
		{ name: '购买记录', icon: icon3 },
	])
	// 切换栏
	const tabList = reactive([
		{ name: '全部', id: 0 },
		{ name: '上新', id: 1 },
		{ name: '居家', id: 2 },
		{ name: '个护', id: 3 },
		{ name: '喵星人', id: 4 },
		{ name: '汪星人', id: 5 },
		{ name: '其他', id: 6 },
		{ name: '其他', id: 7 },
		{ name: '其他', id: 8 },
		{ name: '其他', id: 9 },
		{ name: '其他', id: 10 },
		{ name: '其他', id: 11 },
	])
	
</script>

<style lang="scss" scoped>
	// @import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';

	.integral-box {
		@include flex-between();
		padding: 42rpx 68rpx;

		.title-box {
			color: #fff;

			.title {
				font-size: 31rpx;
			}

			.integral-num {
				margin-top: 10rpx;
				font-size: 52rpx;
			}
		}

		.sign-btn {
			width: 147rpx;
			height: 67rpx;
		}
	}

	.content-wrap {
		padding: 0 26rpx;
		margin-top: -120rpx;
		margin-bottom: 30rpx;
	}

	.tools-list {
		margin-top: 20rpx;
		background: #FFFFFF;
		border-radius: 27rpx;
		padding: 40rpx 112rpx;

		.tool-item {
			@include flex-center();
			flex-direction: column;

			.tool-name {
				margin-top: 22rpx;
				color: #565656;
				font-size: 20rpx;
			}
		}
	}
	.waterfall {
		margin-top: 30rpx;
	}
	
	
</style>